import {
	addNotifyTemplateList,
	getNotifyTemplateList,
	modifyNotifyTemplateList,
	removeNotifyTemplateList
} from "@/api/modules/notification";
import Empty from "@/components/Empty";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import BaseSearchForm from "@/components/SearchForm/BaseSearchForm";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { confirm, generateUUID, showMsg, showTips } from "@/utils/util";
import MouldDetail from "./components/mouldDetail";
import { ComponentInternalInstance, getCurrentInstance } from "vue";
import "./notifyMould.scss";
export default defineComponent({
	setup() {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		const proTableRef = ref();
		const columns: ColumnProps[] = [
			{ type: "selection", fixed: "left", width: "auto" },
			{ prop: "name", label: proxy?.$t("notifymould.tablist_label.name"), width: "150" },
			{ prop: "type", label: proxy?.$t("notifymould.tablist_label.type"), width: "120" },
			{ prop: "content", label: proxy?.$t("notifymould.tablist_label.content") },
			{ prop: "operate", label: proxy?.$t("notifymould.tablist_label.operate"), width: "150" }
		];
		const buttonsList = ref<any>([]);
		onMounted(async () => {
			// 获取页面按钮权限
			buttonsList.value = await useAuthButtons();
		});
		const dataCallback = (data: any) => {
			return {
				datalist: data.records,
				total: data.total || 0,
				pageIndex: data.current,
				pageSize: data.size
			};
		};
		const getTableList = async (params: any) => {
			return getNotifyTemplateList(params);
		};
		const handerBtn = async (fn: string, row: any) => {
			let selected = row.selectList || [row];
			switch (fn) {
				case "mod":
					if (selected.length != 1) {
						showMsg(proxy?.$t("notifymould.msg.mod"), false);
						return;
					}
					detailDialog.visible = true;
					currentItem.value = selected[0];
					break;
				case "del":
					if (!selected.length) {
						showMsg(proxy?.$t("notifymould.msg.del"), false);
						return;
					}
					confirm({ content: proxy?.$t("notifymould.confirm.del") }).then(async (flag: any) => {
						if (!flag) {
							return;
						}
						submitDel({ ids: selected.map((item: any) => item.id) });
					});
					break;
				case "add":
					detailDialog.visible = true;
					currentItem.value = { id: "", type: "2" };
					break;
			}
		};
		const detailDialog = reactive({ visible: false, title: proxy?.$t("notifymould.dialog_title.detail") });
		const currentItem = ref({ id: "", type: "1" });
		const submitDel = async (param: { ids: string[] }) => {
			let { code, message } = await removeNotifyTemplateList(param);
			let ok = showTips(code, proxy?.$t("notifymould.tips.del"), message);
			if (ok) {
				proTableRef.value.reset();
			}
		};
		const submit = async () => {
			let ok;
			if (currentItem.value.type == "1") {
				console.log(currentItem.value);
				let { code, message } = await addNotifyTemplateList({ ...currentItem.value });
				ok = showTips(code, proxy?.$t("notifymould.tips.add"), message);
			} else {
				if (currentItem.value.id) {
					let { code, message } = await modifyNotifyTemplateList({ ...currentItem.value });
					ok = showTips(code, proxy?.$t("notifymould.tips.edit"), message);
				} else {
					let { code, message } = await addNotifyTemplateList({ ...currentItem.value, id: generateUUID() });
					ok = showTips(code, proxy?.$t("notifymould.tips.add"), message);
				}
			}
			if (ok) {
				detailDialog.visible = false;
				proTableRef.value.getTableList();
			}
		};
		const state = reactive({
			searchParam: {} as any,
			searchColumns: [{ key: "search", label: proxy?.$t("notifymould.search_label.name") }]
		});
		return () => {
			return (
				<div class="hist-alarm-page">
					{detailDialog.visible && (
						<MouldDetail
							title={detailDialog.title}
							v-model:visible={detailDialog.visible}
							detail={currentItem.value}
							onSubmit={submit}
							width="800px"
						></MouldDetail>
					)}
					<BaseSearchForm
						class="mb-4"
						searchItems={state.searchColumns}
						search={state.searchParam}
						onFeatch={() => proTableRef.value.reset()}
					></BaseSearchForm>
					<ProTable
						ref={proTableRef}
						toolbar={["grid"]}
						title={buttonsList.value.length ? "" : proxy?.$t("notifymould.search_label.notify")}
						gridSpan={8}
						columns={columns}
						requestApi={getTableList}
						dataCallback={dataCallback}
						initParam={state.searchParam}
						custSearch
						viewType="grid"
					>
						{{
							tableHeader: (scope: any) => {
								return buttonsList.value?.map((item: any) => {
									return (
										<el-button class={`iconfont ${item.icon}`} type={item.btnClass} onClick={() => handerBtn(item.path, scope)}>
											{item.menuName}
										</el-button>
									);
								});
							},
							cardBody: (scope: any) => {
								return (
									<div class="notify-mould-card shadow-md">
										<div class="bg"></div>
										<div class="data-content">
											<div>
												<div class={["item-icon", scope.row.type == "1" ? "sms" : "email"]}></div>{" "}
											</div>
											<div class="title">
												<div>{scope.row.name}</div>
												<el-tag type={scope.row.type == "1" ? "" : "success"}> {scope.row.type == "1" ? "短信" : "邮件"}</el-tag>
											</div>
											<div class="content">{scope.row.content}</div>
										</div>
										<div class="footer">
											<div class="flex items-center">
												<el-button
													class="iconfont iconsettings"
													type="primary"
													disabled={!buttonsList.value.find((item: any) => item.path == "mod")}
													onClick={() => handerBtn("mod", scope.row)}
												>
													{proxy?.$t("notifymould.btn.edit")}
												</el-button>
												{buttonsList.value
													.filter((item: any) => item.path == "del")
													.map((item: any) => {
														return (
															<el-popconfirm
																title={proxy?.$t("notifymould.confirm.title")}
																popper-class="jsonform-tooltip"
																onConfirm={() => submitDel({ ids: [scope.row.id] })}
															>
																{{
																	reference: () => {
																		return (
																			<el-link type="danger" class="ml-4">
																				<i class="iconfont icontrash-2"></i>
																				{item.menuName}
																			</el-link>
																		);
																	}
																}}
															</el-popconfirm>
														);
													})}
											</div>
										</div>
									</div>
								);
							},
							type: (scope: any) => {
								return <el-tag type={scope.row.type == "1" ? "" : "success"}> {scope.row.type == "1" ? "短信" : "邮件"}</el-tag>;
							},
							empty: (scope: any) => {
								return (
									<Empty
										title={proxy?.$t("notifymould.empty.title")}
										subtitle={proxy?.$t("notifymould.empty.subtitle")}
										onAdd={() => handerBtn("add", scope.row || {})}
									/>
								);
							},
							operate: (scope: any) => {
								return (
									<>
										{buttonsList.value
											.filter((item: any) => item.path == "del")
											.map((item: any) => {
												return (
													<el-popconfirm
														title={proxy?.$t("notifymould.confirm.title")}
														popper-class="jsonform-tooltip"
														onConfirm={() => submitDel({ ids: [scope.row.id] })}
													>
														{{
															reference: () => {
																return (
																	<el-link type="danger">
																		<i class="iconfont icontrash-2"></i>
																		{item.menuName}
																	</el-link>
																);
															}
														}}
													</el-popconfirm>
												);
											})}
										<el-link
											type="primary"
											link
											class="iconfont iconbx-file"
											disabled={!buttonsList.value.find((item: any) => item.path == "mod")}
											onClick={() => handerBtn("mod", scope.row)}
										>
											{proxy?.$t("notifymould.btn.edit")}
										</el-link>
									</>
								);
							}
						}}
					</ProTable>
				</div>
			);
		};
	}
});
